<template>
    <transition name="fade">
        <div class="imageZoom" v-show="zoomState.data" @mousewheel="rollImg($event)">
            <i class="fa fa-times-circle" @click="closeZoom"></i>
            <slot></slot>
            <div id="handleImage"><img class="handleImage" :src="imgSrc" alt ref="handleImage"></div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "imageZoom",
        props: {
            imgSrc: String,
            zoomState: {
                type: Object,
                default: function () {
                    return {
                        data: false
                    }
                }
            }
        },
        methods: {
            closeZoom() {
                this.zoomState.data = false
            },
            rollImg(e) {

                const $this = this

                const currentZoom = $this.$refs.handleImage.style.zoom

                let zoom = parseInt(currentZoom) || 100

                zoom += e.wheelDelta / 12

                if (zoom >= 100 && zoom <250) {

                    $this.$refs.handleImage.style.zoom = zoom + "%"

                }

            }
        }
    }
</script>

<style scoped lang="stylus">
    #handleImage
        position: absolute
        top: 0
        bottom: 0
        right: 0
        left: 0
        z-index: 0
    .fa-times-circle
        position: absolute
        top: 10%
        right: 12%
        font-size: 40px
        color:#284689
        cursor: pointer
        z-index: 1
    .handleImage
        position: relative
        top: 50%
        width: auto
        transform: translateY(-50%)
    .imageZoom
        position: fixed
        top: 0
        right: 0
        bottom: 0
        left: 0
        background: rgba(0, 0, 0, .8)
        text-align: center
        z-index: 99999999
    .fade-enter-active,
    .fade-leave-active
        transition: opacity .5s
    .fade-enter,
    .fade-leave-to
        opacity: 0
</style>